import {
    apiUrl
} from '@/config/index'
Component({
    options: {
        addGlobalClass: true,
    },
    properties: {
        id: {
            type: String,
            value: '',
            observer(id) {
                this.genIndependentID(id);
                if (this.properties.thresholds?.length) {
                    this.createIntersectionObserverHandle();
                }
            },
        },
        data: {
            type: Object,
            observer(data) {
                if (!data) {
                    return;
                }
                let isValidityLinePrice = true;
                if (data.originPrice && data.price && data.originPrice < data.price) {
                    isValidityLinePrice = false;
                }
                this.setData({
                    goods: data,
                    isValidityLinePrice
                });
            },
        },
        currency: {
            type: String,
            value: '¥',
        },

        courseList: {
            type: Array,
            value: [],
            observer(courseList) {
                const obj = courseList.find(v => v.value === this.data.goods.courseType)
                this.setData({
                    courseType: obj
                });
            }
        },

        thresholds: {
            type: Array,
            value: [],
            observer(thresholds) {
                if (thresholds && thresholds.length) {
                    this.createIntersectionObserverHandle();
                } else {
                    this.clearIntersectionObserverHandle();
                }
            },
        },
    },

    data: {
        independentID: '',
        goods: {
            id: ''
        },
        courseType: {},
        isValidityLinePrice: false,
        apiUrl,
        isBuy: false,
    },

    lifetimes: {
        ready() {
            this.init();
        },
        detached() {
            this.clear();
        },
    },

    pageLifeTimes: {},

    methods: {
        clickHandle() {
            this.triggerEvent('click', {
                goods: this.data.goods
            });
        },

        clickThumbHandle() {
            this.triggerEvent('thumb', {
                goods: this.data.goods
            });
        },

        addCartHandle(e) {
            this.setData({
                isBuy: true
            })
        },

        hideCartHandle(e) {
            this.setData({
                isBuy: false
            })
        },

        genIndependentID(id) {
            let independentID;
            if (id) {
                independentID = id;
            } else {
                independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
            }
            this.setData({
                independentID
            });
        },

        init() {
            const {
                thresholds,
                id
            } = this.properties;
            this.genIndependentID(id);
            if (thresholds && thresholds.length) {
                this.createIntersectionObserverHandle();
            }
        },

        clear() {
            this.clearIntersectionObserverHandle();
        },

        intersectionObserverContext: null,

        createIntersectionObserverHandle() {
            if (this.intersectionObserverContext || !this.data.independentID) {
                return;
            }
            this.intersectionObserverContext = this.createIntersectionObserver({
                thresholds: this.properties.thresholds,
            }).relativeToViewport();

            this.intersectionObserverContext.observe(
                `#${this.data.independentID}`,
                (res) => {
                    this.intersectionObserverCB(res);
                },
            );
        },

        intersectionObserverCB() {
            this.triggerEvent('ob', {
                goods: this.data.goods,
                context: this.intersectionObserverContext,
            });
        },

        clearIntersectionObserverHandle() {
            if (this.intersectionObserverContext) {
                try {
                    this.intersectionObserverContext.disconnect();
                } catch (e) {}
                this.intersectionObserverContext = null;
            }
        },
    },
});